<template>
  <div class="select-date-picker-box" :style="selectStyle">
    <el-date-picker
      v-model="value"
      :type="selectConfig.type||'date'"
      :format="selectConfig.format||'yyyy-MM-dd'"
      :value-format="selectConfig.valueFormat||'yyyy-MM-dd'"
      :picker-options="selectConfig.hasPickerOptions?pickerOptions:{}"
      :placeholder="selectConfig.placeholder||'请输入内容'"
      :clearable="!!selectConfig.clearable"
      :range-separator="selectConfig.rangeSeparator||'-'"
      :start-placeholder="selectConfig.startPlaceholder||'开始日期'"
      :end-placeholder="selectConfig.endPlaceholder||'结束日期'"
      @change="handlerSelectData"
    />
  </div>
</template>

<script>
export default {
  name: 'SelectDatePicker',
  props: {
    // 筛选样式
    selectStyle: {
      type: Object,
      default: () => ({})
    },
    // 筛选配置
    selectConfig: {
      type: Object,
      default: () => ({})
    },
    // 筛选数据
    selectData: {
      type: Object,
      default: () => ({})
    },
    // 是否重置
    isReset: {
      type: Boolean,
      default: false
    },
    dynamicSelectData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      value: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    isReset() {
      this.handlerDefault('init')
    },
    dynamicSelectData: {
      handler(val) {
        if (val && Object.keys(val).length) {
          const { prop } = this.selectData
          for (const key in val) {
            if (Object.hasOwnProperty.call(val, key) && key === prop) {
              this.value = val[key]
              // this.handlerSelectData(this.value, 'init')
            }
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.handlerDefault('init')
  },
  methods: {
    /**
     * 处理默认值
     */
    handlerDefault() {
      const { defaultConfig } = this.selectData
      this.value = null
      if (defaultConfig) {
        this.value = defaultConfig.value
      }
      if (this.value) {
        this.handlerSelectData(this.value, 'init')
      }
    },
    /**
     * 处理筛选
     * @param {*} val 数据
     * @param {*} type 类型
     */
    handlerSelectData(value, type) {
      const { prop } = this.selectData
      const obj = {}
      // 范围日期筛选
      if (Array.isArray(prop)) {
        if (Array.isArray(value)) {
          obj[prop[0]] = this.value[0]
          obj[prop[1]] = this.value[1]
        } else {
          obj[prop[0]] = null
          obj[prop[1]] = null
        }
      } else {
        obj[prop] = this.value
      }
      this.$emit('handlerSelectData', obj, type)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-date-picker-box {
  width: 180px;

  .el-date-editor {
    width: 100%;
  }
}
</style>
